// src/pages/shizhiran/generatingPlan.tsx
import React, { useState, useEffect } from 'react';
import './gender.css';

const GeneratingPlan: React.FC = () => {
  const [progress, setProgress] = useState<number>(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }
        return prev + 5;
      });
    }, 300);

    return () => clearInterval(interval);
  }, []);

  const handleStartTraining = () => {
    console.log('Starting home...');
    window.location.href = '/index/home'; // 跳转至训练首页
  };

  return (
    <div className="container">


      <div className="title">正在制定您的培训计划</div>

      <div className="loading-container">
        <div className="progress-circle">
          <svg width="120" height="120" viewBox="0 0 120 120">
            <circle
              cx="60"
              cy="60"
              r="50"
              fill="none"
              stroke="#e0e0e0"
              strokeWidth="8"
            />
            <circle
              cx="60"
              cy="60"
              r="50"
              fill="none"
              stroke="#f47c4a"
              strokeWidth="8"
              strokeDasharray={`${2 * Math.PI * 50} ${2 * Math.PI * 50}`}
              strokeDashoffset={`${2 * Math.PI * 50 * (1 - progress / 100)}`}
              strokeLinecap="round"
              transform="rotate(-90 60 60)"
            />
          </svg>
          <div className="progress-text">{progress}%</div>
        </div>
      </div>

      <div className="description">
        我们根据人口结构、活动水平和兴趣创建锻炼
      </div>

      <button
        className="next-button1 enabled"
        onClick={handleStartTraining}
      >
        开始训练
      </button>
    </div>
  );
};

export default GeneratingPlan;